<template>
	<view class="page-cont" :style="themeStore.theme">
		<navbar :title="type==0?'点位详情':'添加点位'"></navbar>
		<view class="main-cont" :style="{height: pageHeight}">

			<view class="form-cont">
				<uni-forms ref="pointForm" :value="formData" :rules="rules" labelPosition="top" labelWidth="200">
					<uni-forms-item label="开始点位" name="startpoint" required>
						<!-- <uni-easyinput v-model="formData.startpoint" clearable placeholder="请输入" /> -->
						<picker :range="devList" range-key="name" :value="formData.startpoint"
							@change="startPointChange">
							<uni-easyinput v-model="formData.startpoint" disabled placeholder="请选择" />
						</picker>
					</uni-forms-item>
					<uni-forms-item label="结束点位" name="endpoint" required>
						<!-- <uni-easyinput v-model="formData.endpoint" clearable placeholder="请输入" /> -->
						<picker :range="devList" range-key="name" :value="formData.endpoint" @change="endPointChange">
							<uni-easyinput v-model="formData.endpoint" disabled placeholder="请选择" />
						</picker>
					</uni-forms-item>
					<uni-forms-item label="上限" name="startvalue" required>
						<uni-easyinput v-model="formData.startvalue" type="number" clearable placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="下限" name="endvalue" required>
						<uni-easyinput v-model="formData.endvalue" type="number" clearable placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="开始时间" name="starttime" required>
						<picker mode="time" :value="formData.starttime" @change="startTimeChange">
							<uni-easyinput v-model="formData.starttime" disabled placeholder="请选择" />
						</picker>
					</uni-forms-item>
					<uni-forms-item label="结束时间" name="endtime" required>
						<picker mode="time" :value="formData.endtime" @change="endTimeChange">
							<uni-easyinput v-model="formData.endtime" disabled placeholder="请选择" />
						</picker>
					</uni-forms-item>
				</uni-forms>
			</view>

			<!-- 按钮 -->
			<view class="btn-cont">
				<view class="btn-update" @click="submitForm()">{{type==0?'修改点位':'确认添加'}}</view>
				<view class="btn-delete" @click="deleteForm()()" v-if="type==0">删除点位</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref, computed, watch, getCurrentInstance, onMounted, onUnmounted } from 'vue';
	import { storeToRefs } from 'pinia';
	import useThemeStore from '@/store/theme';
	import useHomeStore from '@/store/home';
	import { useNavbar } from "@/utils/hooks.js";
	import { onLoad } from "@dcloudio/uni-app";
	import { addPoint, updatePoint, deletePoint } from "@/api/home.js";
	import { getDevInfoList } from "@/api/data.js";
	const themeStore = useThemeStore();
	const homeStore = useHomeStore();
	const { pageHeight } = useNavbar();
	const { projectId, deviceId, deviceName, deviceType, deviceList, projectModus, projectType } = storeToRefs(homeStore);
	const popup = ref()
	const isOpen = ref(false)
	const pointForm = ref()
	const { proxy } = getCurrentInstance();

	// 0修改点位 1 添加点位
	const type = ref(0);

	const devList = ref([])

	onLoad((query) => {
		type.value = query?.type;
		formData.value = {
			mid: projectId.value,
			type: 20,
			oid: deviceId.value,
		};
	});

	onMounted(() => {
		if (type.value == 0) {
			formData.value = homeStore.pointInfo;
		}
		getDevInfoLists();
		// formData.id = homeStore.pointInfo.id;
		// formData.point = homeStore.pointInfo.point;
		// formData.value = homeStore.pointInfo.value;
		// formData.starttime = homeStore.pointInfo.starttime;
		// formData.endtime = homeStore.pointInfo.endtime;
	})

	onUnmounted(() => {
		homeStore.setPointInfo({})
	})

	const formData = ref({});

	const rules = reactive({
		startpoint: {
			rules: [{
				required: true,
				errorMessage: "请选择开始点位",
			},],
		},
		endpoint: {
			rules: [{
				required: true,
				errorMessage: "请选择结束点位",
			},],
		},
		startvalue: {
			rules: [{
				required: true,
				errorMessage: "请输入上限",
			},],
		},
		endvalue: {
			rules: [{
				required: true,
				errorMessage: "请输入下限",
			},],
		},
		starttime: {
			rules: [{
				required: true,
				errorMessage: "请选择开始时间",
			},],
		},
		endtime: {
			rules: [{
				required: true,
				errorMessage: "请选择结束时间",
			},],
		},
	})

	const startTimeChange = (e) => {
		formData.value.starttime = e.detail.value;
	}

	const endTimeChange = (e) => {
		formData.value.endtime = e.detail.value;
	}

	const startPointChange = (e) => {
		console.log("startPointChange ", e)
		formData.value.startpoint = devList.value[e.detail.value].name;
	}

	const endPointChange = (e) => {
		console.log("endPointChange ", e)
		formData.value.endpoint = devList.value[e.detail.value].name;
	}

	const getDevInfoLists = () => {
		getDevInfoList({ mid: projectId.value }).then(res => {
			devList.value = res;
		})
	}

	const submitForm = () => {
		if (formData.value.startvalue - formData.value.endvalue < 0) {
			uni.showToast({
				title: '上限不能小于下限',
				icon: 'none'
			})
			return;
		}

		if ((formData.value.endtime.split(":")[0] * 60 + formData.value.endtime.split(":")[1]) - (formData.value.starttime.split(":")[0] * 60 + formData.value.starttime.split(":")[1]) < 0) {
			uni.showToast({
				title: '结束时间不能小于开始时间',
				icon: 'none'
			})
			return;
		}
		pointForm.value.validate().then((valid = false) => {
			if (valid) {
				let func = type.value == 0 ? "修改点位" : "添加点位";
				uni.showModal({
					title: '温馨提示',
					content: '确认' + func + '?',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							if (type.value == 0) {
								//修改点位
								updatePoint(formData.value).then(res => {
									if (res.code == 200) {
										uni.$emit('point-refresh-list')
										uni.showModal({
											title: '温馨提示',
											content: '修改成功,是否继续?',
											showCancel: true,
											cancelText: '取消',
											confirmText: '继续',
											success: res => {
												if (!res.confirm) {
													uni.navigateBack();
												}
											},
										});
									}
								})
							} else {
								//添加点位
								addPoint(formData.value).then(res => {
									if (res.code == 200) {
										uni.$emit('point-refresh-list')
										uni.showModal({
											title: '温馨提示',
											content: '添加成功,是否继续?',
											showCancel: true,
											cancelText: '取消',
											confirmText: '继续',
											success: res => {
												if (res.confirm) {
													formData.value = {
														mid: projectId.value,
														type: 20,
														oid: deviceId.value,
													};
												} else {
													uni.navigateBack();
												}
											},
										});
									}
								})
							}
						}
					},
				});
			}
		});
	}

	const deleteForm = () => {
		deletePoint(formData.value).then(res => {
			if (res.code == 200) {
				uni.showModal({
					title: '温馨提示',
					content: '点位删除成功',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							uni.$emit('point-refresh-list')
							uni.navigateBack();
						}
					},
				});
			}
		})
	}

	// 下拉选择设备
	const handleOpen = () => {
		isOpen.value = true;
		popup.value.open();
	}
	// 设备切换
	const handleDeviceChange = (item) => {
		isOpen.value = false;
		popup.value.close();
		homeStore.setDeviceId(item.id);
		homeStore.setDeviceName(item.name);
		// getData();
	}
</script>

<style lang="scss" scoped>
	.page-cont {
		.main-cont {
			position: relative;
			padding-bottom: 80px;

			.form-cont {
				margin: 10px;
				padding: 10px;
				border-radius: 5px;
				background-color: #fff;

				.uni-input {
					display: flex;
					box-sizing: border-box;
					flex-direction: row;
					align-items: center;
					color: #333;
					border: 1px solid #dcdfe6;
					border-radius: 4px;
					height: 35px;
					padding-left: 20rpx;
					padding-right: 20rpx;
				}
			}

			.device-select {
				height: 40px;
				line-height: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: transparent;
				border-bottom: 1px solid #ccc;

				.device-name {
					color: #666;
					font-size: 14px;
				}

				.device-arrow {
					padding-left: 10px;
					width: 16px;
					height: 16px;
				}
			}

			.btn-cont {
				display: flex;
				flex-direction: row;
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				padding: 10px;

				.btn-update,
				.btn-delete {
					height: 50px;
					line-height: 50px;
					color: #fff;
					flex: 1;
					font-size: 14px;
					text-align: center;
					border-radius: 5px;
					background-color: $theme-color;
				}

				.btn-delete {
					margin-left: 20rpx;
					background-color: #FC4A2E;
				}
			}
		}

		.popup-cont {
			background: #fff;
			max-height: 80vh;

			.popup-title,
			.popup-header {
				height: 50px;
				line-height: 50px;
				color: #333;
				font-size: 14px;
				text-align: center;
				border-top: 1px solid #eee;
			}

			.popup-header {
				font-size: 16px;
				font-weight: 600;
			}
		}

		::v-deep .is-disabled {
			background-color: #fff !important;
			color: #333;
		}

		::v-deep .uni-forms-item {
			margin-bottom: 10px;
		}

		::v-deep .uni-forms-item.is-direction-top .uni-forms-item__label {
			padding: 0 0 0 0;
		}
	}
</style>